<template>
	<div class="home-container">
		<el-row :gutter="15" class="layout-padding-auto">

			<div class="layout-container flex">

				<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

				<div class="layout-main">

					<MainHeader :second-name="lxsAppData.tab.secondName"/>

					<div class="main-content">

						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="产品名称">
									<el-select size="small" v-model="lxsAppData.tableData.param.product_title" class="w100" placeholder="请选择" @change="productChange">
										<el-option label="全部" value="0"></el-option>
										<el-option
											v-for="(item, index) in lxsAppData.productData"
											:key="item.id"
											:label="item.product_title"
											:value="index">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="日期">
									<el-date-picker
										v-model="lxsAppData.tableData.param.data_time"
										type="datetimerange"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										format="YYYY-MM-DD HH:mm:ss"
										value-format="YYYY-MM-DD HH:mm:ss"
										size="small"
										clearable
										@change="dataTimeChange"
									/>
								</el-form-item>
							</el-col>
						</el-row>

						<el-card shadow="hover" class="min-table layout-padding-auto mt10">
							<el-table
								:data="lxsAppData.tableData.data"
								v-loading="lxsAppData.tableData.loading"
								size="small"
								:header-cell-style="{backgroundColor: '#EEF1F5', color: '#010101'}"
								highlight-current-row
								style="width: 100%"
								empty-text="暂无记录"
							>
								<el-table-column prop="product_title" label="产品名称" show-overflow-tooltip max-width="180">
									<template #default="scope">{{ scope.row.product_title }}（{{ scope.row.popularize_name }}）</template>
								</el-table-column>
								<el-table-column prop="new_total" label="总拉新数" show-overflow-tooltip max-width="120"></el-table-column>
								<el-table-column prop="platform_link" label="总拉新成单" show-overflow-tooltip max-width="120">
									<template #default="scope">
										<span v-if="scope.row.new_order_total > 0" class="color-success">{{ scope.row.new_order_total }}</span>
										<span v-else-if="scope.row.new_order_total < 0" class="color-danger">{{ scope.row.new_order_total }}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column prop="online_platform_num" label="今日拉新数" show-overflow-tooltip max-width="120">
									<template #default="scope">
										<span v-if="scope.row.new_today_num > 0" class="color-success">{{ scope.row.new_today_num }}</span>
										<span v-else-if="scope.row.new_today_num < 0" class="color-danger">{{ scope.row.new_today_num }}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column prop="platform_type_name" label="今日拉新成单数" show-overflow-tooltip max-width="120">
									<template #default="scope">
										<span v-if="scope.row.new_today_order_num > 0" class="color-success">{{ scope.row.new_today_order_num }}</span>
										<span v-else-if="scope.row.new_today_order_num < 0" class="color-danger">{{ scope.row.new_today_order_num }}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
								<el-table-column prop="commission_ratio" label="拉新数较昨日" show-overflow-tooltip max-width="120">
									<template #default="scope">
										<span v-if="scope.row.new_compare > 0" class="color-success">+{{ scope.row.new_compare }}</span>
										<span v-else-if="scope.row.new_compare < 0" class="color-danger">-{{ scope.row.new_compare }}</span>
										<span v-else>0</span>
									</template>
								</el-table-column>
							</el-table>

							<div class="table-footer">
								<el-pagination
									small
									hide-on-single-page
									@size-change="onHandleSizeChange"
									@current-change="onHandleCurrentChange"
									class="mt15"
									:pager-count="5"
									:page-sizes="[10, 20, 30]"
									v-model:current-page="lxsAppData.tableData.param.page"
									background
									v-model:page-size="lxsAppData.tableData.param.pageSize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="lxsAppData.tableData.total"
								>
								</el-pagination>
							</div>

						</el-card>

					</div>

				</div>

			</div>

		</el-row>
	</div>
</template>

<script setup lang="ts" name="statistics">
import {ref, onMounted, reactive} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStatisticsApi } from "/src/api/statistics";

import MainColumns from "/src/components/common/main-columns.vue";
import MainHeader from "/src/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: 0,
		secondName: ref('')
	},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			pageSize: 10,
			product_title: '',
			data_time: '',
		},
	},
	productData: [],
	platformData: [
		{name: '产品数据', path: '/statistics'},
		{name: '收益数据', path: '/statistics/data_income'},
	],
})

// 左侧平台点击
const platformDataClick = (index: number) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 搜索产品名称点击
const productChange = (index: number) => {
	lxsAppData.tableData.param.product_title = lxsAppData.productData[index].product_title;
	getDataCenterNewData();
}
// 搜索时间点击
const dataTimeChange = (val: any) => {
	lxsAppData.tableData.param.data_time = val;
	getDataCenterNewData();
}

// 获取数据中心（产品数据）页面数据
const getDataCenterNewData = async () => {
	lxsAppData.tableData.loading = true;
	const res = await useStatisticsApi().getDataCenterData(lxsAppData.tableData.param);
	setTimeout(() => {
		lxsAppData.tableData.loading = false;
	}, 500);
	console.log('获取数据中心页面数据', res.data);
	lxsAppData.tableData.data = res.data.lists;
	lxsAppData.tableData.total = res.data.total;
	lxsAppData.productData = res.data.product_data;

}

// 分页改变
const onHandleSizeChange = (val: any) => {
	lxsAppData.tableData.param.pageSize = val;
	getDataCenterNewData();
};
// 分页改变
const onHandleCurrentChange = (val: any) => {
	lxsAppData.tableData.param.page = val;
	getDataCenterNewData();
};
onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getDataCenterNewData();
});
</script>

<style scoped lang="scss">
.min-table {
	min-height: 76vh;
	position: relative;

	.table-footer {
		width: 95%;
		position: absolute;
		bottom: 0;
		background-color: #fff;
		padding-bottom: 10px;
		box-shadow: inset 0px 1px 0px 0px #DADEE6;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
